<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-setting"></i> 数据概况 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div id="myChartDay" :style="{ width: '1050px', height: '500px' }"></div>
      <div style="border-bottom: 1px solid #ddd; margin: 15px 0 25px 0"></div>
      <div id="myChart" :style="{ width: '1050px', height: '500px' }"></div>
      <div style="border-bottom: 1px solid #ddd; margin: 15px 0 25px 0"></div>
      <div style="position: relative;">
        <div id="ascription" :style="{ width: '1050px', height: '500px' }"></div>
        <div class="select" v-if="storeValFlg">
          <el-select v-model="storeVal" placeholder="请选择" filterable @change="storeSelectChang">
            <el-option key="全部门店" label="全部门店" value="">
            </el-option>
            <el-option v-for="item in departmentList" :key="item.name" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { DataFromInit, DataFromDayInit, DataFromDaystore, DataFromDayCityDataStore } from '../../../api/index';

export default {
  data() {
    return {
      fromArr: [],
      dataType: [],
      dataArr: [],

      fromDayArr: [],
      dataDayArr: [
        {
          name: '今天导入',
          type: 'bar',
          data: []
        },
        {
          name: '昨天导入',
          type: 'bar',
          data: []
        }
      ],

      storeVal: '',
      storeValFlg: false,
      departmentList: [],

      channelList: [],
      cityList: [],
      ascriptionConfig: [],

    };
  },
  created() {
    this.getInit();
    this.getDayInit();
    this.getStore();
  },
  // watch:{
  //     "$route": "getData"
  // },
  mounted() {

  },
  methods: {
    //月度请求数据
    getInit() {
      DataFromInit().then((res) => {
        if (res.code === 0) {
          let month = new Date().getMonth() + 1;
          for (let y = 0; y < month; y++) {
            this.dataType.push(y + 1 + '月');
            this.dataArr.push({
              name: y + 1 + '月',
              type: 'bar',
              data: []
            });
          }
          res.dataList.forEach((item, i) => {
            this.fromArr.push(item.dfFromName);
          });

          this.dataArr.forEach((item, index) => {
            switch (index) {
              case 0:
                for (let i = 0; i < res.dataList.length; i++) {
                  item.data.push(res.dataList[i]['january']);
                }
                break;
              case 1:
                for (let i = 0; i < res.dataList.length; i++) {
                  item.data.push(res.dataList[i]['february']);
                }
                break;
              case 2:
                for (let i = 0; i < res.dataList.length; i++) {
                  item.data.push(res.dataList[i]['march']);
                }
                break;
              case 3:
                for (let i = 0; i < res.dataList.length; i++) {
                  item.data.push(res.dataList[i]['april']);
                }
                break;
              case 4:
                for (let i = 0; i < res.dataList.length; i++) {
                  item.data.push(res.dataList[i]['may']);
                }
                break;
              case 5:
                for (let i = 0; i < res.dataList.length; i++) {
                  item.data.push(res.dataList[i]['june']);
                }
                break;
              case 6:
                for (let i = 0; i < res.dataList.length; i++) {
                  item.data.push(res.dataList[i]['july']);
                }
                break;
              case 7:
                for (let i = 0; i < res.dataList.length; i++) {
                  item.data.push(res.dataList[i]['august']);
                }
                break;
              case 8:
                for (let i = 0; i < res.dataList.length; i++) {
                  item.data.push(res.dataList[i]['september']);
                }
                break;
              case 9:
                for (let i = 0; i < res.dataList.length; i++) {
                  item.data.push(res.dataList[i]['october']);
                }
                break;
              case 10:
                for (let i = 0; i < res.dataList.length; i++) {
                  item.data.push(res.dataList[i]['november']);
                }
                break;
              case 11:
                for (let i = 0; i < res.dataList.length; i++) {
                  item.data.push(res.dataList[i]['december']);
                }
                break;
            }
          });
          this.drawLine();
        } else {
          this.$message(res.msg);
        }
      });
    },
    //每日请求数据
    getDayInit() {
      DataFromDayInit().then((res) => {
        if (res.code === 0) {
          res.dataList.forEach((item, i) => {
            this.fromDayArr.push(item.dfFromName);
          });

          this.dataDayArr.forEach((item, index) => {
            switch (index) {
              case 0:
                for (let i = 0; i < res.dataList.length; i++) {
                  item.data.push(res.dataList[i]['today']);
                }; break;
              case 1:
                for (let i = 0; i < res.dataList.length; i++) {
                  item.data.push(res.dataList[i]['yesterday']);
                }; break;
            }
          })
          this.drawLineDay();
        } else {
          this.$message(res.msg);
        }
      });
    },
    //获取部门数据
    getStore() {
      DataFromDaystore().then((res) => {
        if (res.code == 0) {
          this.departmentList = res.storeList;
          this.storeValFlg = res.isShow;
          if (!res.isShow) this.storeVal = res.storeList[0].id;
          this.getAscription();
        } else {
          this.$message(res.msg);
        }
      })
    },
    //数据归属地获取
    getAscription() {
      DataFromDayCityDataStore({ teamId: this.storeVal }).then((res) => {
        if (res.code == 0) {
          this.channelList = [];
          this.cityList = [];
          this.ascriptionConfig = [];

          res.dataList.forEach((item, i) => {
            //提取渠道
            this.channelList.push(item.dfFromName);
            //提取城市
            item.thirdUserList.forEach((ev, index) => {
              this.cityList.push(ev.phoneCity);
            })
            this.cityList = this.unique(this.cityList);
            //配置数据
            this.ascriptionConfig.push({
              type: 'bar',
              data: (() => {
                let arr = [];
                this.cityList.forEach((even, y) => {
                  item.thirdUserList.forEach((ev, index) => {
                    if (even == ev.phoneCity) {
                      arr.push(ev.num);
                    }
                    if (index == item.thirdUserList.length - 1) {
                      arr.push(0);
                    }
                  })
                })
                return arr;
              })(),
              coordinateSystem: 'polar',
              name: item.dfFromName,
              stack: 'a',
            })
          })
          console.log(this.ascriptionConfig)
          this.pieConfig();
        } else {
          this.$message(res.msg);
        }
      })

    },
    //月度初始化
    drawLine() {
      let that = this;
      let myChart = this.$echarts.init(document.getElementById('myChart'));
      myChart.setOption({
        title: { text: '月度新数据一览' },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: that.dataType
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: that.fromArr
        },
        series: that.dataArr
      });
    },
    //每日初始化
    drawLineDay() {
      let that = this;
      let myChart = this.$echarts.init(document.getElementById('myChartDay'));
      myChart.setOption({
        title: { text: '每日新数据一览' },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['今天导入', '昨天导入']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: that.fromDayArr
        },
        series: that.dataDayArr
      });
    },
    //扇形初始化-号码归属
    pieConfig() {
      let that = this;
      let ascription = this.$echarts.init(document.getElementById('ascription'));
      ascription.setOption({
        title: { text: '数据归属地一览' },
        angleAxis: {
          type: 'category',
          data: that.cityList
        },
        radiusAxis: {
        },
        tooltip: {
          show: true
        },
        polar: {
        },
        series: that.ascriptionConfig,
        legend: {
          show: true,
          data: that.channelList
        }
      })
    },
    //切换门店
    storeSelectChang(val) {
      this.getAscription();
    },
    //去重
    unique(arr) {
      let result = [];
      for (let i = 0; i < arr.length; i++) {
        if (result.indexOf(arr[i]) < 0) result.push(arr[i]);
      }
      return result;
    }
  }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.select {
    position: absolute;
    top: 35px;
}
</style>
